import styles from './index.module.scss'
import {useRef} from "react";


// 性别可以进行修改
// 根据type类型渲染具体下拉框
// 下拉类型执行 提前维护好不同的下拉数据 使用的时候直接判断，然后使用就可以

const genderList = [
  {
    text: '男',
    value: '0'
  },
  {
    text: '女',
    value: '1'
  }
]

const photoList = [
  {
    text: '拍照',
    value: ''
  },
  {
    text: '本地选择',
    value: ''
  }
]
// 需要把用户选择的图片数据，获取到之后，提交给服务器
const EditList = ({onClose, updateName, type, changePhoto}) => {
  /**
   * 点击了性别的时候
   * 进行数据的提交
   * 关闭弹层
   */
  const fileRef = useRef(null)
  const currentList = type === 'gender' ? genderList : photoList
  /**
   * 点击子项之后触发的方法
   */
  const onItemClick = (gender) => () => {
    if (!type) return
    if (type === 'photo') {
      // 如果当前是photo类型，触发文件选择框的点击事件，弹出文件选择框
      //  弹出文件选择框
      fileRef.current?.click()
    } else {
      updateName({
        [type]: gender
      })
    }
  }

  /**
   * 监听input框的change事件
   */
  const handleChangePhoto = e => {
    const file = e.target.files[0]
    if (!file) return
    const fd = new FormData()
    //  添加数据
    fd.append('photo', file)
    // TODO: 当前的formData提交服务器
    changePhoto(fd)
  }
  return (
    <div className={styles.root}>
      {
        currentList.map((item, index) => (
          <div key={index} className="list-item" onClick={onItemClick(item.value)}>{item.text}</div>
        ))
      }
      <div className="list-item" onClick={onClose}>取消</div>
      <input onChange={handleChangePhoto} type="file" hidden ref={fileRef}/>
    </div>
  )
}

export default EditList
